<template>
    <div class="invite">
        <img src="../../assets/img/invite-bg.png" alt="">
        <div class="header1">
            <div class="header-left">
                    <span @click="$router.go(-1)">
                        <i class="iconfont iconzuojiantou"></i>
                    </span>
            </div>
        </div>
        <div class="qrcode">
            <img :src="imgurl" alt="">
        </div>
        <div class="invite-bottom flex">
            <div class="ib-left flex-center"
                 v-clipboard:copy="copyUrl"
                 v-clipboard:success="onCopy"
                 v-clipboard:error="onError">
                复制邀请链接
            </div>
            <router-link tag="div" to="/poster" class="ib-right flex-center">
                生成邀请卡
            </router-link>
        </div>
    </div>
</template>

<script>

    export default {
        name: "invite",
        data(){
            return {
                copyUrl:"",
                imgurl:""
            }
        },
        mounted(){
          this.getData()
        },
        methods:{
            getData(){
              this.$http.post('user/getQrcode',{}).then(res=>{
                  console.log(res)
                  this.imgurl = res.data;
              })
                this.$http.post('user/invitation',{}).then(res=>{
                    console.log(res)
                    this.copyUrl = res.data
                })
            },
            onCopy(){
                this.$toast('复制成功')
            },
            onError(){
                this.$toast('复制失败')
            }
        }
    }
</script>

<style scoped lang="less">
    .invite{
        position: fixed;
        width: 100vw;
        height: 100vh;
        &>img{
            width: 100vw;
            height:100vh;
            object-fit: cover;
        }
        .header1{
            position: fixed;
            top: 0;
            width: 100%;
            height: 92px;
            display: flex;
            align-items: center;
            z-index: 10;
            .header-left{
                width: 200px;
                span{
                    display: inline-block;
                    height: 100%;
                    padding: 0 24px;
                    i{
                        font-size: 40px;
                        color: white;
                    }
                }
            }
        }
        .qrcode{
            position: absolute;
            top: 48vh;
            left:calc(50% - 250px);
            width: 500px;
            height: 500px;
            text-align: center;
            background: url("../../assets/img/circle.png") no-repeat 100% 100%;
            background-size: 100% 100%;
            padding: 120px;
            box-sizing: border-box;
            img{
                width: 265px;
                height: 265px;
            }
        }
        .invite-bottom{
            position: fixed;
            bottom:0;
            width: 100%;
            .ib-left{
                width: 286px;
                height: 98px;
                background-color: #0f0f0f;
                font-size: 32px;
                color: #ffffff;
            }
            .ib-right{
                width: 464px;
                height: 98px;
                background-color: #e2af80;
                font-size: 32px;
                color: #0f0f0f;
            }
        }

    }
</style>
